<template>
	<view class="content">
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block @click="goHome()" slot="backText">去首页</block>
			<block slot="content">{{dataDetail.Title}}</block>
		</cu-custom>
		<!-- 人员照片 -->
		<view v-if="dataDetail.IntroductionImage!=null&&dataDetail.IntroductionImage!=''" class="topPicture" style="margin-top: 10px;">
			<view class="topTitle">图片</view>
			<view>
				<image :src="dataDetail.IntroductionImage" class="topImg" mode="widthFix"></image>
			</view>
		</view>
		<view v-if="dataDetail.IntroductionImage==null||dataDetail.IntroductionImage==''" style="height: 20px;width: 100%"></view>
		<!-- 自定义表单数据 -->
		<view v-if="FormData.length>0"  class="topPicture">
			<view class="topTitle">详细信息</view>
			<view class="customFormBox">
				<view v-for="(item,index) in FormData" :key="index" :class="index%2!==0?'eachBox':'eachBoxTwo'">
					<view>{{item.label}}</view>
					<view>{{item.value}}</view>
				</view>
			</view>
		</view>
		<!-- 图片资料 -->
		<view v-if="FileImages.length>0" class="topPicture">
			<view class="topTitle">资料文档</view>
			<view  v-for="(item,index) in FileImages" :key="index" >
				<image :src="ip+item" class="topImg" mode="widthFix"></image>
			</view>
		</view>
		<!-- 文档资料 有文档就显示-->
		<view v-if="Files.length>0" class="topPicture">
			<view class="topTitle">资料文档</view>
			
			<view  v-for="(item,index) in Files" :key="index" class="filesBox">
				<view><text class="text-lg">{{item.split('/')[item.split('/').length-1]}}</text></view>
				<view @click="openDocument(item)" class="btn">查看</view>
			</view>
		</view>
		<view class="extra"> </view>
		<view class="extra"> </view>
		
		<!-- 加入按钮 -->
		
		<!-- <view class="publish-goods-wrap">
			<view  @click="goScene()" class="publish-goods-btn-left publish-goods-btn-left-bg1">去报修</view>
			<view  @click="goScan()" class="publish-goods-btn-left publish-goods-btn-left-bg2">去巡检</view>
			<view  @click="goWeiBao()" class="publish-goods-btn-left publish-goods-btn-left-bg3">去维保</view>
			<view  @click="goHome()" class="publish-goods-btn-left publish-goods-btn-left-bg4">去首页</view>
		</view> -->
		
		<!-- 新版本按钮 -->
		<view class="publish-goods-wrap-new">
			<view class="button-group">
				<view  @click="goScene()" class="button-item">去报修</view>
				<view  @click="goScan()" class="button-item">去巡检</view>
				<view  @click="goWeiBao()" class="button-item">去维保</view>
				<view  @click="goHome()" class="button-item">去首页</view>
			</view>
		</view>
		<view class="extra1"> </view>
	</view>
</template>

<script>
import request from '@/common/request.js';
export default{
	data(){
		return{
			FormData:[
			],
			id:'',
			params:{},
			dataDetail:{},
			FileImages:[],
			ip:'',
			Files:[]
		}
	},
	onLoad(options) {
		let that=this
		that.ip=this.$request22.baseUrl1
		
		// if (JSON.stringify(options.q)!="{}") {
		// 	// 扫码后接收到的参数
		// 	var url = decodeURIComponent(options.q)
		// 	let id=url.split('=')[1];
		// 	that.GetCustomScanContentById(id);
		// }else{
		// 	console.log(options.id)
		// 	that.GetCustomScanContentById(options.id);
		// }
		
		
		console.log(options)
		
		that.id=options.id
		this.GetCustomScanContentById(options.id)
	},
	methods:{
		//pages-weibao/wbIndex
		goWeiBao(){
			uni.navigateTo({
				url: '/pages-weibao/wbIndex'
			})
		},
		goHome(){
			setTimeout(() => {
				  uni.reLaunch({
					 url: '/pages/index/tabbar?PageCur=home'
				  });
			}, 100)
		},
		goScene(){
			let that=this
			console.log('goScene:'+that.id)
			uni.navigateTo({
				url: '/pages/qrcode/scene/add/add?qrcodeid='+that.id
			})
		},
		goScan(){
			setTimeout(() => {
				 uni.reLaunch({
					url: '/pages/index/tabbar?PageCur=qrcode'
				 });
			}, 0)
		},
		GetCustomScanContentById(id){
			console.log(id)
			uni.showLoading({
				title: '加载中'
			})
			var that = this;
			let opts = {
				url: 'api/GeQrocdeDetailV2ById',
				method: 'get'
			};
			that.params.id=id;
			request.httpRequest(opts,that.params).then(res => {
				uni.hideLoading();
				if(res.data.code == 1){
					that.dataDetail=res.data.data;
					that.FormData=res.data.data.CustomFieldsList
					
					// let fileImages=res.data.data.FileImages.split(',')
					// //that.FileImages
					// if(fileImages.length>0){
					// 	for(let j=0;j<fileImages.length;j++){
					// 		let item=fileImages[j]
					// 		if(item!=null&&item!=""){
					// 			that.FileImages.push(item)
					// 		}
					// 	}
					// }
					// console.log(that.FileImages)
					
					
					let files=res.data.data.Files
					if(files!=null&&files!=''){
						if(files.indexOf(',')!=-1){
							let files111=files.split(',')
							for(let j=0;j<files111.length;j++){
								let item=files111[j]
								if(item!=null&&item!=""){
									that.Files.push(item)
								}
							}
						}else{
							that.Files.push(files)
						}
					}
					that.dataDetail.baseUrl=this.$request22.baseUrl1
					that.Files=res.data.data.FilesArrys
					console.log(that.Files)
					uni.hideLoading();
					
				}
				else{
					uni.showToast({ title: res.data.msg, icon: 'none' });
				}
			});
		},
		openDocument(url){
			uni.showLoading({
				title: '下载中...'
			})
			uni.downloadFile({
				url: this.$request22.baseUrl1+url,
				success: function(res) {
					uni.hideLoading();
					uni.showLoading({
						title: '打开中...'
					})
					var filePath = res.tempFilePath;
					uni.openDocument({
						filePath: filePath,
						success: function(res) {
							uni.hideLoading();
						},fail() {
							uni.hideLoading();
							uni.showToast({ title: '文件打开失败', image: '/static/cha.png',duration:3000  });
						}
					});
				},fail() {
					uni.hideLoading();
					uni.showToast({ title: '文件下载失败', image: '/static/cha.png',duration:3000 });
				}
			})
		},
		goPreviewImage(url,baseurl){
			let urls=[]
			for(let i=0;i<url.length;i++){
				urls.push(baseurl+url[i])
			}
			uni.previewImage({
				current:0,
				urls:urls
			});
		},
	}
}
</script>

<style lang="scss" scoped>
	.topPicture{
		width: 90%;
		background-color: #fff;
		border-radius: 10rpx;
		margin-left: 5%;
		margin-bottom: 30rpx;
		padding-top: 20rpx;
		padding-bottom: 20px;
	}
	.topTitle{
		border-left: 10rpx solid #0079FE;
		padding-left: 30rpx;
		margin-left: 30rpx;
		margin-bottom: 30rpx;
		font-size: 35rpx;
	}
	.topImg{
		width: 90%;
		margin-left: 5%;
		margin-bottom: 30rpx;
		border-radius: 10rpx;
	}
	// 自定义表单
	.customFormBox{
		width: 90%;
		margin-left: 5%;
	}
	.eachBox{
		color: #000000;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 80rpx;
		background-color: rgba(240, 240,240,1);
		font-size: 28rpx;
		padding: 0 20rpx;
	}
	.eachBoxTwo{
		color: #000000;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 80rpx;
		background-color: #fff;
		font-size: 28rpx;
		padding: 0 20rpx;
	}
	// 资料文档
	.filesBox{
		margin-bottom: 40rpx;
		padding:0 5%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		// border: 1px solid red;
		.btn{
			color: #fff;
			background-color: #04AE0F;
			width: 150rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			border-radius: 35rpx;
		}
	}
	.extra{
		width: 100%;
		height: 60rpx;
	}
	.extra1{
		width: 100%;
		height: 420rpx;
	}
	
	.publish-goods-wrap {
			background: rgba(255, 255, 255, .5);
			padding: 24rpx;
			position: fixed;
			//display: flex;
			bottom: 0;
			left: 0;
			right: 0;
			height:300rpx;
			justify-content: center;
		}
	.publish-goods-wrap-new {
			background: rgba(255, 255, 255, .9);
			padding: 24rpx;
			position: fixed;
			//display: flex;
			bottom: 0;
			left: 0;
			right: 0;
			height:160rpx;
			justify-content: center;
		}
	
		.publish-goods-btn-left {
			width: 44%;
			//margin: 12rpx;
			margin-left: 4%;
			margin-top: 20rpx;
			height: 82rpx;
			display: flex;
			color: #FFFFFF;
			align-items: center;
			justify-content: center;
			border-radius: 82rpx;
			float: left;
		}
		
		.publish-goods-btn-left-bg1{
			background: #0079FE;
		}
		.publish-goods-btn-left-bg2{
			background: #5761EF;
		}
		.publish-goods-btn-left-bg3{
			background: #F9B234;
		}
		.publish-goods-btn-left-bg4{
			background: #F16734;
		}
			
	
		.goods-empty-wrap {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 40%;
		}
		
		//button
		.button-group {
		 	display: flex;
			margin: 20rpx 30rpx;
			color: #2979ff;
		}
		
		.button-item {
			flex: 1;
			text-align: center;
			padding: 10px;
			border: 1px solid #2979ff;
			border-left: none;
			cursor: pointer;
		}
		
		.button-group .button-item:first-child {
			border-top-left-radius: 20px;
			border-bottom-left-radius: 20px;
			border-top-right-radius: 0px;
			border-bottom-right-radius: 0px;
			border-left: 1px solid #2979ff;
		}
		
		.button-group .button-item:last-child {
			// border-top-left-radius: 0px;
			// border-bottom-left-radius: 0px;
			border-top-right-radius: 20px;
			border-bottom-right-radius: 20px;
		}
		
		.button-group .button-item:not(:first-child):not(:last-child) {
			border-radius: 0px;
		}
		
</style>